<template>
  <div class="yun-menu">
    <el-menu
        :default-active="activeRoute"
        class="menu"
        text-color="#fff"
        :router="true"
      >
        <el-menu-item index="/home">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index="/tools">
          <el-icon><Tools /></el-icon>
          <span>工具</span>
        </el-menu-item>
        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>工具</span>
          </template>
          <el-menu-item index="/tools/lnglatTransform">
            <span>工具</span>
          </el-menu-item>
        </el-sub-menu> -->
        <el-menu-item index="/components">
          <el-icon><HelpFilled /></el-icon>
          <span>组件</span>
        </el-menu-item>
        <el-menu-item index="/examples">
          <el-icon><Grid /></el-icon>
          <span>示例</span>
        </el-menu-item>
        <el-menu-item index="/askbank">
          <el-icon><Promotion /></el-icon>
          <span>问题库</span>
        </el-menu-item>
        <el-menu-item index="/onlinechat">
          <el-icon><Promotion /></el-icon>
          <span>在线聊天</span>
        </el-menu-item>
        
        <el-sub-menu index="/onlineOffice">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>文档操作</span>
          </template>
          <el-menu-item index="/onlineOffice/xlsList">
            <span>在线xls</span>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="/system">
          <template #title>
            <el-icon><Tools /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="/system/exampleType">
            <span>示例分类</span>
          </el-menu-item>
        </el-sub-menu>
    </el-menu>
  </div>
</template>
<script setup>
import {ref,watch} from 'vue'
import { useRouter } from 'vue-router';
let router = useRouter()
let activeRoute = ref("/home")
watch(() =>router.currentRoute.value.path,(newValue,oldValue)=> {
  activeRoute.value = router.currentRoute.value.meta.activeRoute
},{ immediate: true })

</script>
<style lang="scss" scoped>
  .yun-menu{
    width:240px;
    background: var(--main-color);
    .el-menu{
      background-color: var(--main-color);
     :deep().el-sub-menu{
        &:hover{
            background-color: var(--main-color);
          }
        .el-sub-menu__title{
          &:hover{
            background-color: var(--main-color) !important;
          }
        }
        .el-menu-item{
          background-color: var(--main-color);
          &.is-active{
            color:var(--menu-active-color);
            font-weight: bold;
            font-size:14px;
          }
          &:hover{
            background-color: var(--menu-hover-color);
          }
        }
      }
      .el-menu-item{
        &.is-active{
          color:var(--menu-active-color);
          font-weight: bold;
          font-size:14px;
        }
        &:hover{
          background-color: var(--menu-hover-color);
        }
      }
    }
  }
</style>>